// 自定义组件名必须是小写, vue组件 template 只能有一个根标签
Vue.component("blog-header",{
    template:`
  <header class="header">
    <nav class="navbar navbar-default" id="navbar">
      <div class="container">
        <div class="header-topbar hidden-xs link-border">
          <ul class="site-nav topmenu">
            <li><a href="tags.html">标签云</a></li>
            <li><a href="readers.html" rel="nofollow">读者墙</a></li>
            <li><a href="links.html" rel="nofollow">友情链接</a></li>
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" rel="nofollow">关注本站 <span class="caret"></span></a>
              <ul class="dropdown-menu header-topbar-dropdown-menu">
                <li><a data-toggle="modal" data-target="#WeChat" rel="nofollow"><i class="fa fa-weixin"></i> 微信</a></li>
                <li><a href="#" rel="nofollow"><i class="fa fa-weibo"></i> 微博</a></li>
                <li><a data-toggle="modal" data-target="#areDeveloping" rel="nofollow"><i class="fa fa-rss"></i> RSS</a></li>
              </ul>
            </li>
          </ul>
          <span v-if="user.id">
           <a class="login" rel="nofollow">欢迎: {{user.name}}</a>
           &nbsp;&nbsp;<a @click.prevent="logout" href="javascript:;" class="register" rel="nofollow">退出</a>
          </span>
          <span v-else>
              <a data-toggle="modal" data-target="#loginModal" class="login" rel="nofollow">Hi,请登录</a>
              &nbsp;&nbsp;<a href="javascript:;" class="register" rel="nofollow">我要注册</a>
              &nbsp;&nbsp;<a href="" rel="nofollow">找回密码</a> 
          </span>
          </div>
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar" aria-expanded="false"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
          <h1 class="logo hvr-bounce-in"><a href="" title=""><img src="images/logo.png" alt=""></a></h1>
        </div>
        <div class="collapse navbar-collapse" id="header-navbar">
          <ul class="nav navbar-nav navbar-right">
            <li class="hidden-index"><a :style="{color : cid ? '#555':'#3399CC' }" data-cont="异清轩首页" href="index.html">异清轩首页</a></li>
            <li v-for=" c in categories "><a :style="{color : cid!=c.id ? '#555':'#3399CC' }"
                 @click="chooseCategroy(c.id)">{{c.name}}</a></li>
          </ul>
          <form class="navbar-form visible-xs" action="/Search" method="post">
            <div class="input-group">
              <input type="text" name="keyword" class="form-control" placeholder="请输入关键字" maxlength="20" autocomplete="off">
              <span class="input-group-btn">
              <button class="btn btn-default btn-search" name="search" type="submit">搜索</button>
              </span> </div>
          </form>
        </div>
      </div>
    </nav>
    
      <!--微信二维码模态框-->
      <div class="modal fade user-select" id="WeChat" tabindex="-1" role="dialog" aria-labelledby="WeChatModalLabel">
        <div class="modal-dialog" role="document" style="margin-top:120px;max-width:280px;">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="WeChatModalLabel" style="cursor:default;">微信扫一扫</h4>
            </div>
            <div class="modal-body" style="text-align:center"> <img src="images/weixin.jpg" alt="" style="cursor:pointer"/> </div>
          </div>
        </div>
      </div>
      <!--该功能正在日以继夜的开发中-->
      <div class="modal fade user-select" id="areDeveloping" tabindex="-1" role="dialog" aria-labelledby="areDevelopingModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="areDevelopingModalLabel" style="cursor:default;">该功能正在日以继夜的开发中…</h4>
            </div>
            <div class="modal-body"> <img src="images/baoman/baoman_01.gif" alt="深思熟虑" />
              <p style="padding:15px 15px 15px 100px; position:absolute; top:15px; cursor:default;">很抱歉，程序猿正在日以继夜的开发此功能，本程序将会在以后的版本中持续完善！</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" data-dismiss="modal">朕已阅</button>
            </div>
          </div>
        </div>
      </div>
      <!--登录注册模态框-->
      <div class="modal fade user-select" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <form action="/Admin/Index/login" method="post">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="loginModalLabel">登录</h4>
              </div>
              <div class="modal-body">
                <div class="form-group">
                  <label for="loginModalUserNmae">用户名</label>
                  <input v-model="user.name" type="text" class="form-control" id="loginModalUserNmae" placeholder="请输入用户名" autofocus maxlength="15" autocomplete="off" required>
                </div>
                <div class="form-group">
                  <label for="loginModalUserPwd">密码</label>
                  <input v-model="user.pwd" type="password" class="form-control" id="loginModalUserPwd" placeholder="请输入密码" maxlength="18" autocomplete="off" required>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button @click.prevent="login" type="submit" class="btn btn-primary">登录</button>
              </div>
            </form>
          </div>
        </div>
      </div>
      <!--右键菜单列表-->
      <div id="rightClickMenu">
        <ul class="list-group rightClickMenuList">
          <li class="list-group-item disabled">欢迎访问异清轩博客</li>
          <li class="list-group-item"><span>IP：</span>172.16.10.129</li>
          <li class="list-group-item"><span>地址：</span>河南省郑州市</li>
          <li class="list-group-item"><span>系统：</span>Windows10 </li>
          <li class="list-group-item"><span>浏览器：</span>Chrome47</li>
        </ul>
      </div>
  </header>
    `,
    data() {
        return {
            user : {},
            categories : [],
            cid : ""  // 当前打开的分类的 id
        }
    },
    created(){
        // 检测是否已经登录
        this.checkLogin();
        axios.get("/c112s3plyblog/category/queryAll").then(res=>{
            this.categories = res.data;
        });
        // 提取请求中的 cid 参数
        if(location.href.indexOf("cid=")>=0){
            this.cid = location.href.replace(/.+cid=(\d+)/,"$1");
        }
    },
    methods:{
        login(){
            let p = new URLSearchParams();
            p.append("username",this.user.name);
            p.append("password",this.user.pwd);
            axios.post("login",p).then(res=>{
                this.$alert(res.data);
                this.checkLogin();
            });
        },
        logout(){
            axios.get("logout").then(res=>{
                this.$message("退出成功!");
                // 重置 user 对象
                this.user = {};
            });
        },
        checkLogin(){
            axios.get("getLoginedUser").then(res=>{
                if(res.data){
                    this.user = res.data;
                    // 登录成功, 关闭 bootstrap 模态登录窗口
                    $('#loginModal').modal('hide');
                }
            });
        },
        chooseCategroy(cid){
            if(this.cid != cid){
                this.cid = cid;
                // 查询分类: 方式一 不推荐
                // this.$parent.query
                // 方式二: 自定义一个事件, 参数一:事件名, 参数二:事件参数, 参数3~N...
                this.$emit("category-change", cid);
            }
        }
    }
})

Vue.component("blog-footer",{
    template:`
  <footer class="footer">
    <div class="container">
      <p>&copy; 2016 <a href="">ylsat.com</a> &nbsp; <a href="http://www.miitbeian.gov.cn/" target="_blank" rel="nofollow">豫ICP备20151109-1</a> &nbsp; <a href="sitemap.xml" target="_blank" class="sitemap">网站地图</a></p>
    </div>
    <div id="gotop"><a class="gotop"></a></div>
  </footer>
    `
})


function buildParams(obj){
    let params = new URLSearchParams();
    for (let name in obj) {
        if(obj[name]){
            params.append(name, obj[name]);
        }
    }
    return params;
}